<template>
	<view class="report-every">
		<view class="report-content">
			<!-- 页面标题 -->
			<view class="header">
				<text class="title">举报不良内容</text>
				<text class="subtitle">我们重视您的反馈，请填写以下信息帮助我们维护良好的社区环境。您的个人信息将被严格保密。</text>
			</view>

			<!-- 举报表单卡片 -->
			<view class="form-card">
				<form @submit.prevent="submitReport">
					<!-- 举报类型选择 -->
					<view class="form-group">
						<label class="form-label">举报类型 <span class="required">*</span></label>
						<view class="select-wrapper">
							<!-- 使用picker替代select以兼容小程序环境 -->
							<picker v-model="selectedTypeIndex" :range="reportTypes" @change="handleTypeChange">
								<view class="form-select">
									{{ selectedTypeIndex !== null ? reportTypes[selectedTypeIndex] : '请选择举报类型' }}
									<view class="select-icon">▼</view>
								</view>
							</picker>
						</view>
						<view v-if="errors.reportType" class="error-message">{{ errors.reportType }}</view>
					</view>

					<!-- 举报理由 -->
					<view class="form-group">
						<label class="form-label">举报理由 <span class="required">*</span></label>
						<textarea v-model="formData.reason" class="form-textarea" placeholder="请详细描述您的举报理由..."
							maxlength="500"></textarea>
						<view class="form-footer">
							<view v-if="errors.reason" class="error-message">{{ errors.reason }}</view>
							<view class="char-count">{{ formData.reason.length }}/500</view>
						</view>
					</view>

					<!-- 上传图片证据 -->
					<view class="form-group">
						<label class="form-label">上传图片证据 (可选)</label>
						<view class="upload-area" @click="chooseImage">
							<view class="upload-icon">+</view>
							<view class="upload-text">点击上传图片</view>
							<text class="upload-hint">支持 JPG, PNG 格式，单张不超过5MB，最多3张</text>
						</view>

						<!-- 已上传图片预览 -->
						<view v-if="uploadedFiles.length > 0" class="image-grid">
							<view v-for="(file, index) in uploadedFiles" :key="index" class="image-item">
								<image :src="file" mode="aspectFill" class="preview-image"></image>
								<view class="delete-btn" @click="removeFile(index)">×</view>
							</view>
						</view>
					</view>

					<!-- 联系人电话 -->
					<view class="form-group">
						<label class="form-label">联系人电话 <span class="required">*</span></label>
						<view class="input-wrapper">
							<view class="input-icon">📞</view>
							<input v-model="formData.phone" type="number" class="form-input" placeholder="请输入您的联系电话"
								maxlength="11">
						</view>
						<view v-if="errors.phone" class="error-message">{{ errors.phone }}</view>
					</view>

					<!-- 提交按钮 -->
					<view class="submit-group">
						<button type="button" @click="cancelreport()" class="submit-btn"
							style="background-color: #999;">
							取消
						</button>
						<button type="button" @click="submitReport" class="submit-btn">
							提交举报
						</button>
					</view>
				</form>
			</view>

			<!-- 成功提示模态框 -->
			<view v-if="showSuccessModal" class="modal-overlay">
				<view class="modal-container">
					<view class="modal-content">
						<view class="success-icon">✓</view>
						<text class="modal-title">举报提交成功</text>
						<text class="modal-message">感谢您的反馈，我们将尽快处理您的举报。</text>
						<button @click="okreport" class="modal-btn">
							确定
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import storereport from '../../store/report.js';
	import {
		PostReport,
		CommentReport,
		ImageReport,
		query
	} from '../../api/reportApi.js';
	export default {
		data() {
			return {
				reportstore: storereport,
				// 举报类型列表
				reportTypes: [
					'垃圾信息',
					'骚扰内容',
					'不适当内容',
					'版权侵犯',
					'隐私侵犯',
					'其他'
				],
				// 选中的类型索引
				selectedTypeIndex: null,
				// 表单数据
				formData: {
					reason: '',
					phone: ''
				},
				// 已上传图片临时路径
				uploadedFiles: [],
				// 错误信息
				errors: {},
				// 成功提示框显示状态
				showSuccessModal: false
			};
		},
		mounted() {
			// const dd= query({});
			// uni.showModal({
			// 	title:'信息',
			// 	content:JSON.stringify(dd),
			// 	showCancel:true,
			// 	confirmText:"ok"
			// })
			// console.log(1);
		},
		methods: {
			// 处理举报类型变更
			handleTypeChange(e) {
				this.selectedTypeIndex = e.detail.value;
			},

			// 选择图片（兼容小程序的图片选择方式）
			chooseImage() {
				// 计算还能上传多少张
				const maxCount = 3 - this.uploadedFiles.length;
				if (maxCount <= 0) {
					uni.showToast({
						title: '最多只能上传3张图片',
						icon: 'none'
					});
					return;
				}

				uni.chooseImage({
					count: maxCount,
					sizeType: ['compressed'],
					success: (res) => {
						// 添加新选择的图片
						this.uploadedFiles = [...this.uploadedFiles, ...res.tempFilePaths];
					}
				});
			},

			// 移除图片
			removeFile(index) {
				this.uploadedFiles.splice(index, 1);
			},

			// 表单验证
			validateForm() {
				this.errors = {};
				let isValid = true;

				// 验证举报类型
				if (this.selectedTypeIndex === null) {
					this.errors.reportType = '请选择举报类型';
					isValid = false;
				}

				// 验证举报理由
				if (!this.formData.reason.trim()) {
					this.errors.reason = '请填写举报理由';
					isValid = false;
				} else if (this.formData.reason.length > 500) {
					this.errors.reason = '举报理由不能超过500个字符';
					isValid = false;
				}

				// 验证手机号码
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!this.formData.phone.trim()) {
					this.errors.phone = '请填写联系人电话';
					isValid = false;
				} else if (!phoneRegex.test(this.formData.phone)) {
					this.errors.phone = '请输入有效的手机号码';
					isValid = false;
				}

				return isValid;
			},

			cancelreport() {
				this.resetForm();
				this.reportstore.hide();
			},

			okreport() {
				this.showSuccessModal = false;
				this.reportstore.hide();
			},

			// 提交举报
			async submitReport() {
				if (!this.validateForm()) return;


				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});

				try {
					if (this.reportstore.reporttype == "帖子") {
						// 输出举报项目，用于调试
						console.log('要提交的reportitem:', JSON.stringify(this.reportstore.reportitem));

						// 确保kyyPostReportEntity是可序列化的对象
						const reportParams = {
							reporttype: this.reportTypes[this.selectedTypeIndex],
							reportreason: this.formData.reason,
							contactsphone: this.formData.phone,
							tieId: this.reportstore.reportitem.id
							// kyyPostReportEntity: this.reportstore.reportitem
						};

						const imgreport = {
							reportImg: this.uploadedFiles,
							imgname: String(this.reportstore.reportitem.id) + this.reportstore.reporttype + String(
								this.formData.phone)
						}
						console.log(this.uploadedFiles);

						// console.log('发送的参数:', JSON.stringify(reportParams));

						try {
							// 先调用PostReport
							const postReportRes = await PostReport(reportParams);
							console.log('基本信息提交成功，响应:', postReportRes);

							if (postReportRes.code === 0) {
								// PostReport成功，继续调用ImageReport
								try {
									if (Array.isArray(this.uploadedFiles) && this.uploadedFiles.length > 0) {
										const imageReportRes = await ImageReport(imgreport);
										console.log('图片上传成功，响应:', imageReportRes);
									}

									// 全部成功，显示成功提示
									this.showSuccessModal = true;

									// 重置表单
									this.resetForm();
								} catch (imageError) {
									// ImageReport失败
									console.error('图片上传失败详情:', imageError);
									uni.showToast({
										title: '图片上传失败，请稍后再试',
										icon: 'none'
									});
								}
							} else {
								// PostReport返回错误码
								uni.showToast({
									title: postReportRes.msg || '基本信息提交失败',
									icon: 'none'
								});
							}
						} catch (postError) {
							// PostReport执行出错
							console.error('基本信息提交失败详情:', postError);
							uni.showToast({
								title: '提交失败，请稍后再试',
								icon: 'none'
							});
						} finally {
							// 无论成功失败都隐藏加载框
							uni.hideLoading();
						}
					}
					if (this.reportstore.reporttype == "评论") {
						console.log('要提交的评论reportitem:', JSON.stringify(this.reportstore.reportitem));

						const reportParams = {
							reporttype: this.reportTypes[this.selectedTypeIndex],
							reportreason: this.formData.reason,
							contactsphone: this.formData.phone,
							pinglunId: this.reportstore.reportitem.id,
							forumId: this.reportstore.reportitem.forumid
							// kyyCommentReportEntity: this.reportstore.reportitem
						};

						const imgreport = {
							reportImg: this.uploadedFiles,
							imgname: String(this.reportstore.reportitem.id) + this.reportstore.reporttype + String(
								this.formData.phone)
						};

						// console.log('发送的评论参数:', JSON.stringify(reportParams));






						try {
							// 先调用CommentReport
							const commentReportRes = await CommentReport(reportParams);
							console.log('评论信息提交成功，响应:', commentReportRes);

							if (commentReportRes.code === 0) {
								// CommentReport成功，继续调用ImageReport（如果有图片）
								if (this.uploadedFiles.length > 0) {
									try {
										if (Array.isArray(this.uploadedFiles) && this.uploadedFiles.length > 0) {
											const imageReportRes = await ImageReport(imgreport);
											console.log('图片上传成功，响应:', imageReportRes);
										}

										// 全部成功，显示成功提示
										this.showSuccessModal = true;

										// 重置表单
										this.resetForm();
									} catch (imageError) {
										// ImageReport失败
										console.error('评论图片上传失败详情:', imageError);
										uni.showToast({
											title: '图片上传失败，请稍后再试',
											icon: 'none'
										});
									}
								} else {
									// 没有图片需要上传，直接显示成功
									this.showSuccessModal = true;

									// 重置表单
									this.resetForm();
								}
							} else {
								// CommentReport返回错误码
								uni.showToast({
									title: commentReportRes.msg || '评论举报失败',
									icon: 'none'
								});
							}
						} catch (commentError) {
							// CommentReport执行出错
							console.error('评论举报失败详情:', commentError);
							uni.showToast({
								title: '提交失败，请稍后再试',
								icon: 'none'
							});
						} finally {
							// 无论成功失败都隐藏加载框
							uni.hideLoading();
						}
					}
				} catch (error) {
					console.error('举报过程中出现异常:', error);
					uni.hideLoading();
					uni.showToast({
						title: '提交举报失败，请稍后再试',
						icon: 'none'
					});
				}
			},

			// 重置表单
			resetForm() {
				this.selectedTypeIndex = null;
				this.formData = {
					reason: '',
					phone: ''
				};
				this.uploadedFiles = [];
			}
		}
	};
</script>

<style scoped>
	/* 基础容器样式 */
	.report-every {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.report-content {
		width: 100%;
		max-width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
		color: #333;
		max-height: 90vh;
		overflow-y: auto;
	}

	/* 页面标题样式 */
	.header {
		/* text-align: center; */
		margin-bottom: 10rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.subtitle {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	/* 表单卡片样式 */
	.form-card {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}

	/* 表单组样式 */
	.form-group {
		margin-bottom: 10rpx;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		/* margin-bottom: 10rpx; */
	}

	.required {
		color: #f5222d;
	}

	/* 输入框样式 */
	.form-input,
	.form-select,
	.form-textarea {
		width: 100%;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #f7f7f7;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.form-textarea {
		height: 100px;
		resize: vertical;
	}

	/* 选择框样式 */
	.select-wrapper {
		position: relative;
	}

	.form-select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f7f7f7;
	}

	.select-icon {
		color: #999;
		font-size: 24rpx;
	}

	/* 上传区域样式 */
	.upload-area {
		border: 2px dashed #e5e5e5;
		border-radius: 8rpx;
		/* padding: 40rpx 20rpx; */
		text-align: center;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.upload-area:active {
		background-color: #f5f5f5;
	}

	.upload-icon {
		font-size: 60rpx;
		color: #999;
		/* margin-bottom: 15rpx; */
	}

	.upload-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.upload-hint {
		font-size: 24rpx;
		color: #999;
	}

	/* 图片预览样式 */
	.image-grid {
		display: flex;
		gap: 15rpx;
		flex-wrap: wrap;
		margin-top: 15rpx;
	}

	.image-item {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.delete-btn {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		width: 36rpx;
		height: 36rpx;
		background-color: rgba(255, 0, 0, 0.8);
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	/* 带图标输入框 */
	.input-wrapper {
		position: relative;
	}

	.input-icon {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #999;
		font-size: 28rpx;
	}

	.form-input {
		padding-left: 60rpx;
	}

	/* 错误提示 */
	.error-message {
		color: #f5222d;
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	/* 表单底部 */
	.form-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 8rpx;
	}

	.char-count {
		font-size: 24rpx;
		color: #999;
	}

	/* 提交按钮 */
	.submit-group {
		margin-top: 40rpx;
		display: flex;
	}

	.submit-btn {
		width: 40%;
		padding: 20rpx;
		background-color: #FF6A00;
		color: white;
		font-size: 30rpx;
		font-weight: 500;
		border: none;
		border-radius: 8rpx;
		cursor: pointer;
	}

	/* 模态框样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-container {
		background-color: white;
		border-radius: 16rpx;
		width: 80%;
		max-width: 500rpx;
		padding: 40rpx;
		animation: modalShow 0.3s;
	}

	@keyframes modalShow {
		from {
			opacity: 0;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	.modal-content {
		text-align: center;
	}


	.success-icon {
		width: 48px;
		height: 48px;
		background-color: #52c41a;
		border-radius: 50%;
		color: white;
		font-size: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 15px;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
		display: block;
	}

	.modal-message {
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
		display: block;
	}

	.modal-btn {
		width: 100%;
		padding: 10px;
		background-color: #FF6A00;
		color: white;
		font-size: 14px;
		font-weight: 500;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.modal-btn:hover {
		background-color: #d15300;
	}



	.report-every {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.report-content {
		width: 80%;
		max-width: 600rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
		border: 1rpx solid rgba(255, 106, 0, 0.4);
		color: white;
	}

	/* .report-title {
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
		color: #000000;
	} */

	/* .report-form {
		margin-bottom: 40rpx;
	} */

	/* .report-info {
		text-align: center;
		margin-bottom: 30rpx;
	} */

	/* .report-tips {
		color: rgba(113, 113, 113, 0.8);
		font-size: 28rpx;
		line-height: 1.6;
	} */


	/* .form-item {
		margin-bottom: 30rpx;
	} */

	.form-input {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		height: 80rpx;
		/* padding: 0 20rpx; */
		/* margin-left: 20px; */
		color: #000000;
		width: 100%;
		box-sizing: border-box;
	}

	.placeholder {
		color: rgba(0, 0, 0, 0.5);
	}

	/* .code-item {
		display: flex;
		justify-content: space-between;
	} */

	/* .code-input {
		width: 60%;
	} */

	/* .code-btn {
		width: 35%;
		height: 80rpx;
		line-height: 80rpx;
		background: rgba(255, 106, 0, 0.8);
		color: white;
		border-radius: 10rpx;
		font-size: 24rpx;
		padding: 0;
	} */

	/* .date-picker {
		width: 100%;
	} */

	/* .picker-view {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		height: 80rpx;
		padding: 0 20rpx;
		color: #000000;
		display: flex;
		align-items: center;
	} */

	/* .report-buttons {
		display: flex;
		justify-content: space-between;
	} */

	.cancel-btn,
	.confirm-btn {
		width: 45%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.cancel-btn {
		background: rgba(122, 122, 122, 0.1);
		color: rgba(0, 0, 0, 0.8);
	}

	.confirm-btn {
		background: linear-gradient(to right, #FF6A00, #FF4500);
		color: white;
	}

	/* .report-result {
		text-align: center;
		margin-top: 30rpx;
	} */

	.report-success {
		color: #07c160;
		font-size: 28rpx;
	}
</style>